<template>
    <div class="bgi">
        <div class="form">
            <div class="title">宠物后台管理系统</div>
            <el-input v-model="textInput" type="text" placeholder="请输入您的用户名" style="width:200px" /> <br>
            <el-input v-model="pwdInput" type="password" placeholder="请输入您的密码" style="width:200px" show-password/> <br>
            <el-checkbox v-model="checked1" label="记住用户名和密码" size="large" />
            <p class="submit1">
                <button type="submit" @click="submit" class="btn">登录</button>
            </p>
        </div>
    </div>

</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue"
import "@/mock/user";
import axios from "axios";
import { useRouter } from "vue-router";
const router = useRouter();
const textInput = ref<any>('')
const pwdInput = ref<any>('')
const checked1 = ref(false)
const submit = () => {
    axios.post("/api/login", { username: textInput.value, password: pwdInput })
        .then((res) => {
            console.log(res);
            if (res.data.status === 2) {
                    localStorage.setItem("username", textInput.value);
                    localStorage.setItem("password", pwdInput.value);
            }
            router.push("/home/index");
        });
}
onMounted(() => {
    if (localStorage.getItem("username")) {
        textInput.value = localStorage.getItem("username");
        pwdInput.value = localStorage.getItem("password");
    }
});
</script>
<style lang="less" setup>
.bgi {
    // border: 1px solid black;
    background: url(../../assets/images/图层1.png) no-repeat;
    width: 100%;
    height: 600px;
}

.form {
    width: 300px;
    height: 250px;
    border-radius: 10px;
    background-color: #E9DCC4;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10%;

    .title {
        width: 100%;
        height: 40px;
        text-align: center;
        line-height: 40px;
    }
    .el-input{
        position: absolute;
        left:50%;
        top: 50px;
        transform: translateX(-50%);
    }
    .el-input--suffix{
        position: absolute;
        left:50%;
        top: 100px;
        transform: translateX(-50%);
    }
    .el-checkbox{
        position: absolute;
        left:50%;
        top: 130px;
        transform: translateX(-50%);
    }
    .submit1{
    width: 100%;
    height: 40px;
    position: relative;
    top: 80px;
     .btn{
        position: absolute;
        left:50%;
        transform: translateX(-50%);
    }
}
}
    


</style>